<template>
  <div class="cover">
    <!-- 歌单或歌手封面图 -->
    <ul>
      <li v-for="(item, index) in imgList" :key="index" @click="clickImg(item.id)">
        <div class="img-wrap">
          <slot name="img" :item="item">
            <img :src="item.picUrl + '?param=300y300'" alt="">
          </slot>
          <!-- 右上播放量 -->
          <div class="playcount cover-font font-12" v-if="item.playCount">
              <i class="iconfont icon-24gl-play"></i>
              {{ item.playCount | playtime }}
          </div>
        </div>
        <div class="text-hidden">{{item.name}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  props: ['imgList'],
  methods: {
    // 点击图片回调
    clickImg (id) {
      this.$emit('clickToDo', id)
    }
  }
}
</script>

<style lang="less" scoped>
.cover {
  display: flex;
  text-align: left;
}
.cover ul {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto; // flex-shrink设为1,让其可以跟随缩小
}
.cover ul li{
  list-style: none;
  width: 18%;
  height: auto;
  margin: 10px;
  // background-color: #df55da;
  // border: 1px solid black;
  .img-wrap {
    position: relative;
    img {
      width: 100%;
      height: 100%;
      max-width: 215px;
      border-radius: 10px;
      cursor: pointer;
      border: 1px solid #e6e6e6;

    }
    .playcount {
    position: absolute;
    left: 10px;
    top: 10px;
    .iconfont {
      font-size: 12px;
    }
  }
  }
}
</style>
